<template>
  <div id="uploadFile">
    <el-upload
      class="upload-demo"
      :action="url"
      ref="upload"
      id="awaitUploadFile"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :data="awaitData"
      name="file"
      :accept="awaitFormat"
      :limit="1"
      :on-success="getUploadId"
      :on-error="uploadError"
      :before-upload="beforeUpload"
      :auto-upload="false"
      :file-list="fileList">
      <el-button  plain>选择文件</el-button>
      <span  class="tips">{{uploadTip}}</span>
    </el-upload>
    <el-button type="primary" @click="submitUpload(fileList)" >导 入</el-button>
  </div>
</template>

<script>
  import {Message} from 'element-ui';
  import {baseUrl} from "../settings"
    export default {
      name: "awaitUploadFile",
      props:["awaitFormat","awaitData","uploadTip"],
      data() {
        return {
          fileList:  [],
          url:baseUrl+'file/import',
          loading:null,
          isShow:false
        };
      },
      methods: {
        handleRemove(file, fileList) {
          if(fileList.length===0){
            this.isShow=false
          }
          console.log(file, fileList);
        },
        beforeUpload(file){
          this.isShow = !(file === undefined || file === null);
        },
        //文件超出个数限制
        handleExceed(files, fileList) {
          Message.warning('一次只能上传一个文件');
        },
        //移除前提示
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${ file.name }？`);
        },
        //点击上传
        submitUpload(file){
          this.$refs.upload.submit();
        },
        //上传成功
        getUploadId(response, file, fileList){
          let that=this;
         if(response.code===200){
           Message.success("文件上传成功");
           that.fileList=[];
           that.$emit('getKey',response.result);
         }else{
           Message.error(response.msg);
           that.fileList=[];
         }
        },
        //上传失败
        uploadError(err, file, fileList){
          Message.success("文件上传失败，请重试");
        }
      },
    }
</script>

<style scoped>
  #awaitUploadFile .tips{
    font-size:12px;
    margin-left:10px;
    color:red;
  }
</style>
